<template>
	<view class="doctor-item" @click="toDoctorDetail(item.id)" v-if="item.id">
		<!-- 		<uni-card :title="item.name" :sub-title="item.professionalTitle"
			:extra="item.hospital+ '(' + item.department + ')'" :thumbnail="item.image"> -->
		<!-- 		<uni-card :title="item.name" :sub-title="item.professionalTitle"
			:extra="`${item.hospital.slice(0,4)}...(${item.department})`" :thumbnail="item.image"> -->
		<uni-card :title="item.name" :sub-title="item.hospital"
			:extra="item.department+ '('+ item.professionalTitle + ')'" :thumbnail="item.image">
			<!-- <text class="uni-body">{{item.details}}</text> -->
			<view class="uni-body">{{showAll(item.details)}}</view>
			<view class="showAll" v-if="item.details.length>40">
				<text class="quanwen" v-if="showText" @tap.native.stop="allShow(0)">
					展开
				</text>
				<text class="quanwen" v-else @tap.native.stop="allShow(1)">
					收起
				</text>
			</view>
		</uni-card>
	</view>
</template>

<script>
	export default {
		name: "speciaItem",
		props: {
			item: {
				type: Object
			}
		},
		data() {
			return {
				showText: true,
			};
		},
		methods: {
			toDoctorDetail(id) {
				uni.navigateTo({
					url: `/subpkg/doctorDetail/doctorDetail?id=${id}`
				})
			},
			showAll(detail) {
				if (detail.length > 40) {
					if (this.showText) {
						return detail.substring(0, 40) + '...'
					} else {
						return detail
					}
				} else {
					return detail
				}
			},
			allShow(type) {
				if (type === 0) {
					this.showText = false
				} else {
					this.showText = true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.showAll {
		color: #2277c6;
		display: flex;
		flex-direction: row-reverse;
	}

	/deep/ .uni-card {
		font-family: Cambria, Cochin, Georgia, Times, ‘Times New Roman’, serif;
	}

	.select-box {
		padding: 0 20rpx;
	}

	/deep/ .uni-stat-box {
		background-color: #fff;

		.uni-select__input-placeholder {}
	}

	.uni-body {
		width: 100%;
	}
</style>
